<template>
    <div class="test">
      <input type="text">
      <div>{{message}}</div>
      <!-- <button @click="add">add</button>
      <button @click="remove">remove</button>
      <transition-group name="list" tag="p">
          <span v-for='item in items' :key='item'>{{item}}</span>
      </transition-group> -->
    </div>
</template>

<script type="text/ecmascript-6">
import Vue from 'vue'

export default {
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  computed: {},
  data() {
    return {
      docState: "off",
      show: false,
      items: [1,2,3,4,5,6,7,8,9],
      nextNum: 10,
      message: 'hello!'
    };
  },
  render: (createElement) => {
    let self = this
    return createElement('input',{
      domProps: {
        value: self.value
      },
      on: {
        input: (event) => {
          this.$emit('input',event.target.value)
        }
      }
    })
  },
  methods: {
    add() {
        this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    randomIndex() {
      return Math.floor(Math.random() * this.items.length)
    },
    remove() {
      this.items.splice(this.randomIndex(), 1)
    },
    test(e) {
      this.message = e.target.value
    }
  },
  created () {
    console.log(this)
  }
};
</script>

<style lang="stylus" scoped>
.test {
    height: 300px;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>
